<template>
	<view>
		<view class="BG"></view>
		<uni-popup ref="popup" type="message"><uni-popup-message :type="messageType"
		 :message="messageText" :duration="2000" class="message"></uni-popup-message></uni-popup>
		<uni-popup ref="popupdia" type="dialog">
		    <uni-popup-dialog type="error" mode="base" title="是否删除" content="这可不能后悔" :duration="0" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
		</uni-popup>
		<view class="contain">
			<msgDetail
				v-for="(item, index) in adviceList"
				:key="item.id"
				:id="item.id"
				:realname="item.realname"
				:time="item.time"
				:username="item.username"
				:content="item.content"
				@getInfo="getInfo"
				@readyDelAdvice="readyDelAdvice"
			></msgDetail>
			<view class="addDetail" @tap="openToAddAdvice">
				<text class="addMsg">点击此处添加你的消息</text>
				<view class="O"></view>
			</view>
		</view>
		<view class="blackbg" style="opacity: 0; transform: scale(0.3);" :animation="animateData" v-if="showInfo">
			<view class="currentAdvice" :style="{ backgroundColor: color }">
				<view class="O"></view>
				<view class="X" @tap="closeAdvice">X</view>
				<view class="realname">
					<text>{{ realname }}</text>
				</view>
				<view v-if="way == 'see'">
					<view class="text">
						<text>{{ content }}</text>
					</view>
				</view>
				<view v-if="way == 'add'">
					<textarea class="textarea" cursor-spacing="5px" placeholder="在此添加你的消息" v-model="adviceContent" />
					<button type="primary" class="add" @tap="addAdvice">添加</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import animate from '../../animate.js';
import msgDetail from './messageDetail.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue';
import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue';
export default {
	components: {
		msgDetail,
		uniPopup,
		uniPopupMessage,
		uniPopupDialog
	},
	data() {
		return {
			flag:false,
			currentAdviceInfo:{},
			messageText: '添加成功',
			messageType: 'success',
			showTip: false,
			adviceList: [],
			showInfo: false,
			realname: '',
			content: '',
			color: 'rgba(255,255,255,.7)',
			way: '',
			adviceContent: '',
			Tiptext: ''
		};
	},
		onPullDownRefresh() {
			setTimeout(()=>{
				uni.reLaunch({
					url:"/pages/message/message"
				})
			},500)
		},
	mixins: [animate.mixin],
	created() {
		this.getAllAdviceInfo();
	},
	computed: {},
	methods: {
		close(done){
			done()
		},
		confirm(done){
			uni.request({
				url:"https://www.ttzxh.icu:443/api/advice/del",
				method:"POST",
				header:{
					Authorization: uni.getStorageSync('LoginToken')
				},
				data:{
					id:this.currentAdviceInfo.id,
					username:this.user.username
				},
				success: (res) => {
				if (res.data.error === -1) {
						this.adviceContent = '';
						setTimeout(() => {
							this.showInfo = false;
						}, 300);
						this.messageText="添加成功"
						this.messageType="success"
						this.open()
						this.fadeOutScale();
						setTimeout(() => {
							this.showInfo = false;
						}, 300);
						this.getAllAdviceInfo();
					} else {
						//失败
						this.messageText="出错了,请再试一下┭┮﹏┭┮"
						this.messageType="warn"
						this.open()
					}
				},
				fail: res => {
					//稍后再试
					this.messageText="出错了,联系我修改一下┭┮﹏┭┮"
					this.messageType="error"
					this.open()
					this.fadeOutScale();
					setTimeout(() => {
						this.showInfo = false;
					}, 300);
				},
				complete: () => {
					done()
				}
			})
		},
		readyDelAdvice(info){
			console.log(info)
			this.currentAdviceInfo=info
			this.openDia()
		},
	open(){
	   this.$refs.popup.open()
	},
	openDia(){
		this.$refs.popupdia.open()
	},
		addAdvice() {
			this.flag = true
			if(this.flag){
				if (this.adviceContent.trim() == '') {
					//错误提示
					this.fadeInScale();
					this.messageType="warn"
					this.messageText="好好填好不┭┮﹏┭┮"
					this.open()
				} else {
					uni.request({
						header: {
							Authorization: uni.getStorageSync('LoginToken')
						},
						method: 'post',
						url: 'https://www.ttzxh.icu:443/api/advice/add',
						data: {
							username: this.user.username,
							content: this.adviceContent
						},
						success: res => {
							if (res.data.error === -1) {
								
								this.adviceContent = '';
								setTimeout(() => {
									this.showInfo = false;
								}, 300);
								this.messageText="添加成功"
								this.messageType="success"
								this.open()
								this.fadeOutScale();
								setTimeout(() => {
									this.showInfo = false;
								}, 300);
								this.getAllAdviceInfo();
							} else {
								//失败
								this.messageText="出错了,再试一下吧┭┮﹏┭┮"
								this.messageType="warn"
								this.open()
							}
						},
						fail: res => {
							//稍后再试
							this.messageText="出错了,联系我修改一下┭┮﹏┭┮"
							this.messageType="error"
							this.open()
							this.fadeOutScale();
							setTimeout(() => {
								this.showInfo = false;
							}, 300);
						},
						complete:()=> {
							this.flag = false
						}
					});
			}
			
			}
		},
		openToAddAdvice() {
			this.fadeInScale();
			this.way = 'add';
			this.color = 'rgba(255,255,255,.7)';
			this.showInfo = true;
		},
		getInfo(info, color) {
			this.fadeInScale();
			this.color = color;
			this.way = 'see';
			this.showInfo = true;
			this.content = info.content;
			this.realname = info.realname;
		},
		closeAdvice() {
			this.fadeOutScale();
			setTimeout(() => {
				this.showInfo = false;
			}, 300);
		},
		getAllAdviceInfo() {
			uni.request({
				method: 'GET',
				url: 'https://www.ttzxh.icu/api/advice/search',
				success: res => {
					this.adviceList = res.data.error === -1 ? res.data.data : [];
				},
				fail: res => {
					//稍后再试
					this.showTip = true;
					this.Tiptext = '出错了,联系我修改一下┭┮﹏┭┮';
					setTimeout(() => {
						this.showTip = false;
					}, 2000);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import url('../../components/css/animate.css');
@import url('../../components/css/comment.css');
.BG {
	width: 100%;
	height: 100vh;
	position: fixed;
	background-image: url(../../static/img/luosahliya1.jpg);
	background-size: 100% 100%;
	opacity: 0.5;
	z-index: -1;
	top: 0;
}
.contain {
	display: flex;
	flex-wrap: wrap;
	padding-top: 35px;
	.addDetail {
		position: relative;
		box-sizing: border-box;
		width: 280upx;
		height: 280upx;
		margin: 20px;
		padding: 35px 10px 10px 10px;
		background-color: rgba($color: #fff, $alpha: 0.5);
		.addMsg {
			margin-top: 25px;
		}
		.O {
			position: absolute;

			left: 10px;

			top: 8px;

			width: 25px;

			height: 25px;

			border-radius: 50%;

			background-color: #fff;
		}
	}
}
.blackbg {
	box-sizing: border-box;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	background-color: rgba($color: #000000, $alpha: 0.5);
	z-index: 9;
	.currentAdvice {
		padding: 15px;
		position: absolute;
		margin: auto;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		box-sizing: border-box;
		width: 90%;
		height: 70%;
		background-color: red;
		.O {
			position: absolute;
			left: 20px;
			top: 20px;
			width: 25px;
			height: 25px;
			border-radius: 50%;
			background-color: #fff;
		}
		.X {
			position: absolute;
			right: 20px;
			top: 20px;
			font-size: 30px;
			font-weight: 100;
		}
		.realname {
			margin-top: 50px;

			font-size: 28px;
			font-weight: 100;
			color: #fff;
		}
		.text {
			margin-top: 5px;
		}
		.textarea {
			box-sizing: border-box;
			padding: 15px;
			border: 2px solid #fff;
			border-radius: 15px;
		}
		.add {
			margin-top: 35px;
		}
	}
}
</style>
